<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<meta name="x5-orientation" content="portrait" />
	<meta name="x5-fullscreen" content="true" />
	<meta name="screen-orientation" content="portrait" />
	<meta name="full-screen" content="yes" />
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/layer_mobile.css"/>
	<link rel="stylesheet" href="css/security_settings.css" />
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/layer_mobile.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	<title>修改密码</title>
</head>
<body>
	<!-- change_password_修改密码 -->
	<div class="change_password">
		<p><a href="security_settings.html"></a><i>修改密码</i></p>
		<span><label><i></i><input class="mobile" type="text" placeholder="账号" /></label></span>
		<span><label><i></i><button class="count">短信验证码</button><input class="auth_code" type="text" placeholder="验证码" /></label></span>
		<span><label><i></i><input class="pwd" type="password" placeholder="新密码" /></label></span>
		<div class="change"><button>修改密码</button></div>
	</div>
</body>
</html>
<script>
	$(function(){
		//修改密码
		var iphonetest=/^1(3|4|5|7|8)\d{9}$/;//表示以1开头，第二位可能是3/4/5/7/8等的任意一个,表示数字[0-9]的9位,11位结束。
	    var pwdtest=/^[\x21-\x7E]{6,20}$/;//匹配以字母开头，长度在6~18之间，只能包含字符、数字和下划线	
		$(".change").on('click',function(){
			var mobile= $(".mobile").val();//账号
			var pwda= $(".pwd").val();//密码
			var auth_code = $('.auth_code').val();
			//正则验证
			if(!(iphonetest.test(mobile))){
				alerts("账号输入有误！");
			}else if(auth_code == ''){
				alerts("验证码不能为空")
			}else if(!(pwdtest.test(pwda))){
				alerts("密码长度为6-20位")
			}
			else{	
				//ajax提交	
				//data传值
				var json = {
					phone:mobile,
					code:auth_code,
					newPassword:pwda,
				}
				$.ajax({
					type:"post",
					url:site+"/login/changePwd",
					datatype:'json',
					data:json,
					success:function(data) {					
				       if (data.code == 0){
				       		alerts(data.msg)
				       }      
				       else{
				       		alerts(data.msg)
				       		$('input').val('');
				    		window.location.href='./login.html'		
				       }
					}
				});
			}
		});
		var InterValObj; //timer变量，控制时间
	    var count = 60; //间隔函数，1秒执行
	    var curCount;//当前剩余秒数
	    var processing = false;//开关
	    $('.count').click(function() {
	        //向后台发送处理数据
	        $.ajax({
	            type: "get", //用post方式传输
	        	url: site+'/login/massage',
	            dataType: "json", //数据格式:JSON
	            data:{
	            	phone:$('.mobile').val(),
	            	mtype:2,
	            },
	            success: function (data) {    
	              	if(data.code == 1){
	                	alerts(data.msg)
	                    curCount = count;
	                    //设置button效果，开始计时
	                    $(".count").attr("disabled", "true");
	                    processing = false;
//	                    $('.auth_code').val(data.data)
	                    console.log(data.data)
	                    $(".count").text(+ curCount + "秒输入");
	                    InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
	                }else {
	                    alerts(data.msg);
	                }
	            }
	        });
		})
	    //timer处理函数
	    function SetRemainTime() {
	        if (curCount == 0) {
	            window.clearInterval(InterValObj);//停止计时器   
	            $(".count").removeAttr("disabled");//启用按钮
	            $(".count").text("发送验证码");    
	            
	        }
	        else {
	            curCount--;
	            processing = true;
	            $(".count").text( + curCount + "秒输入"); 
	        }
	    }
	})
</script>